<template>
	
	<view v-if="thrdSource != ''">
		<web-view :webview-styles="webviewStyles" :src="thrdSource"></web-view>
	</view>
   <view v-else>
        <view class="banner">
            <image class="banner-img" :src="banner.cover"></image>
            <view class="banner-title">{{banner.title}}</view>
        </view>
        <view class="article-meta">
            <text class="article-author">{{banner.author_name}}</text>
            <text class="article-text">发表于</text>
            <text class="article-time">{{banner.published_at}}</text>
        </view>
        <view class="article-content">
            <rich-text v-if="contentType=='text'" :nodes="htmlString"></rich-text>
			<u-parse  v-if="contentType=='htmlText'" :imageProp=upImageProp className="rich-img" :content="htmlString"></u-parse>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <!-- <ad v-if="htmlString" unit-id="adunit-01b7a010bf53d74e"></ad> -->
        <!-- #endif -->
    </view>
	
	
	
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue';
	
    export default {
		components: {
			uParse
		},
        data() {
            return {
                title: 'list-triplex-row',
                banner: {},
                htmlString: "",
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				thrdSource: '',
				contentType: '',
				upImageProp:{
					mode: 'aspectFit',
					padding: 0,
					lazyLoad: false,
					domain: 'jj.kman.gov.cn',
				}
            }
        },
        onShareAppMessage() {
            return {
                title: this.banner.title,
                path: '/pages/template/list2detail-detail/list2detail-detail?detailDate=' + JSON.stringify(this.banner)
            }
        },
        onLoad(event) {
            // 目前在某些平台参数会被主动 decode，暂时这样处理。
			//console.log(event);
            try {
                this.banner = JSON.parse(decodeURIComponent(event.detailDate));
            } catch (error) {
                this.banner = JSON.parse(event.detailDate);
            }
			console.log(this.banner);
			if(this.banner.contentType!=3){
				if(this.banner.contentType==0){
					this.contentType = "text";
					this.htmlString = this.banner.content;
				}else if(this.banner.contentType=1){
					this.contentType = "htmlText";
					this.htmlString = this.banner.content.replace(/\\/g, "").replace(/<img/g,
					    "<img style=\"display:none;\"");
				}
				
				//this.getDetail();
				uni.setNavigationBarTitle({
					title: this.banner.title
				});
			}else{
				this.thrdSource = this.banner.content;
			}
           
        },
        methods: {
            getDetail() {
                uni.request({
                    url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
                    success: (data) => {
                        if (data.statusCode == 200) {
                            this.htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g,
                                "<img style=\"display:none;\"");
                        }
                    },
                    fail: () => {
                        console.log('fail');
                    }
                })
            }
        }
    }
</script>

<style>
    view {
        font-size: 28upx;
        line-height: 1.8;
    }

    .banner {
        height: 360upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }

    .banner-img {
        width: 100%;
		height: 100%;
    }

    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        position: absolute;
        left: 30upx;
        bottom: 30upx;
        width: 90%;
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        color: white;
        z-index: 11;
    }

    .article-meta {
        padding: 20upx 40upx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        color: gray;
    }

    .article-text {
        font-size: 26upx;
        line-height: 50upx;
        margin: 0 20upx;
    }

    .article-author,
    .article-time {
        font-size: 30upx;
    }

    .article-content {
        overflow: hidden;
        font-size: 30upx;
    }
	.rich-img {
		width: 90%;
		height: auto;
		padding: 0 5%;
	}
</style>
